<template>
	<view class="content">
		<view class="title">验证码登录</view>
		<view class="form">
			<view class="custom-input">
				<u-input
					v-model="tel"
					type="number"
					:clearable="true"
					placeholder="请输入手机号码"
					height="90"
					:placeholder-style="placeholderCls"
					maxlength="11"
					:border="false"
				/>
			</view>
			<u-button shape="circle" class="default-login" :ripple="true" :disabled="!canHandle" :class="{ active: canHandle }" @click="handleGetCode">获取验证码</u-button>
			<view class="group-btn">
				<navigator url="./password" hover-class="none" open-type="redirect"><view class="grey-btn">密码登录</view></navigator>
				<navigator url="./index" hover-class="none" open-type="redirect"><view class="grey-btn">一键登录</view></navigator>
			</view>
		</view>
		<bottom :third-party="true">
			<navigator url="./register?type=register" hover-class="none">
				<view class="grey-btn center">
					新用户？点击这里
					<text class="red">注册</text>
				</view>
			</navigator>
		</bottom>

		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import Bottom from './components/bottom.vue';
import { phone } from '@/utils/rules.js';
export default {
	components: {
		Bottom
	},
	data() {
		return {
			tel: '',
			placeholderCls: 'font-size: 32rpx;color: #737373'
		};
	},
	computed: {
		canHandle() {
			return this.tel !== '';
		}
	},
	methods: {
		async getCode() {
			const result = await this.$api.sendMemberCodeSMS({
				mobile: this.tel,
				template: 'login'
			});
			console.log('获取验证码成功', result);
			if (result?.resultCode === '200') {
				this.$refs.uToast.show({
					title: result?.resultMsg ?? '"验证码发送成功"',
					type: 'success',
					duration: 1000,
					callback: () => {
						this.navigateTo({
							url: `./regCode?phone=${this.tel}`
						});
					}
				});
			} else {
				this.$refs.uToast.show({
					title: "发送失败",
					type: 'error',
					duration: 3000
				});
			}
		},
		regTel() {
			return phone.test(this.tel);
		},
		handleGetCode() {
			if (!this.regTel()) {
				this.$refs.uTips.show({
					title: '请输入正确的手机号',
					type: 'error',
					duration: '2000'
				});
				return;
			}
			this.getCode();
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 90rpx 45rpx 30rpx;

	.default-login {
		color: #fff;
		background: linear-gradient(90deg, rgba(254, 97, 79, 0.5) 0%, rgba(235, 77, 60, 0.5) 100%);
		width: 100%;

		&.active {
			background: linear-gradient(90deg, rgba(254, 97, 79, 1) 0%, rgba(235, 77, 60, 1) 100%);
		}
	}

	/deep/ .u-btn--default--disabled {
		border-color: transparent !important;
		color: #fff !important;
	}
}

.title {
	font-size: 55rpx;
	width: 100%;
	margin-bottom: 50rpx;
	font-weight: 500;
}

.form {
	width: 100%;
	padding: 0 14rpx;
	box-sizing: border-box;
}

.custom-input {
	width: 100%;
	padding: 0 48rpx;
	box-sizing: border-box;
	background-color: #efefef;
	border-radius: 50rpx;
	margin-bottom: 30rpx;
}

.wel-txt {
	font-size: 36rpx;
	width: 100%;
	margin: 14rpx 0;
	color: $font-color-grey;

	.red {
		color: $font-color-red;
		margin-left: 6rpx;
	}
}

.phone {
	font-size: 60rpx;
	font-weight: 600;
	margin: 70rpx 0;
}

.group-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.grey-btn {
	color: $font-color-grey;
	font-size: 26rpx;
	margin-top: 20rpx;
	margin-right: 50rpx;
	text-align: center;

	&.center {
		margin-right: 0;
	}

	.red {
		color: $font-color-red;
		margin-left: 6rpx;
	}
}
</style>
